<template>
  <div class="All">
    <Goback :title="title"></Goback>
  <Noticebar :text="text"></Noticebar>
    <div class="qian">
          <div class="L-left">
          <p>当前金额(RMB)</p>
          <b>1699</b>
          </div>
          <div class="R-right">
            <button class="rbtn">充值</button><br>
            <button class="rbtn">提现</button>
          </div>
    </div>
    <van-tabs class="tab666" v-model="activeName">
  <van-tab title="收入明细" name="a">
    <!-- 内容 1 -->
   <div class="mingxi">
<div class="Tu"><img src="../img/收入.png" alt=""></div>
<div class="middle">
  <p>P图白底蓝底照片赚600需要电脑</p>
  <p>2022-7-12</p>
</div>
<div class="shangjin">
  <span>+800</span>
</div>
   </div>
   <div class="mingxi">
<div class="Tu"><img src="../img/收入.png" alt=""></div>
<div class="middle">
  <p>需电脑/在家剪辑接单赚钱/.....</p>
  <p>2022-7-12</p>
</div>
<div class="shangjin">
  <span>+800</span>
</div>
   </div>
    </van-tab>
  <van-tab title="支出明细" name="b">
    <!-- 内容 2 -->
    <div class="mingxi">
<div class="Tu"><img src="../img/充值.png" alt=""></div>
<div class="middle">
  <p>兼职网年会员活动充值</p>
  <p>2022-7-12</p>
</div>
<div class="shangjin">
  <span>-199</span>
</div>
   </div>
    </van-tab>
</van-tabs>
  </div>
</template>
<script>
import Noticebar from "@/components/index/Noticebar";
import Goback from "@/components/index/Goback";
export default {
  data() {
    return {
      title: "",
      activeName: 'a',
      text:""
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.text = this.$route.meta.text;
  },
  components: {
    Goback,
    Noticebar,
  },
};
</script>
<style lang="scss">
.qian{
  height: 274px;
  background-color: #FBC805;
}
.L-left{
  float: left;
  margin-left: 40px;
  margin-top: 34px;
}
.L-left p{
  width: 240px;
height: 31px;
font-size: 32px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
margin-bottom: 34px;
}
.L-left b{
  width: 183px;
height: 64px;
font-size: 86px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
};
.R-right{
  float: right;
  margin-top:50px;
  margin-right: 42px;
} 
.rbtn{
  width: 128px;
  height: 60px;
  background: #FBDE3C;
  border-radius: 10px;
  margin-bottom: 36px;
  font-size: 28px;
  border: none;
}
.mingxi{
  height: 112px;
  display: flex;
  justify-content: space-around;
  background: #ffff;
  border: #c1c1c1 1px solid;
  margin-top: 10px;
}
.Tu img{
  width: 54px;
  height: 50px;
  margin-top: 30px
}
.middle{
  margin-top: 20px;
  margin-left: -60px;
}
.middle p:nth-of-type(1){
font-size: 24px;
font-family: PingFang SC;
font-weight: 600;
color: #000000;
}
.middle p:nth-of-type(2){
font-size: 20px;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin-top: 10px;
}
.shangjin{
  margin-top: 34px;
}
.shangjin span{
 font-size: 32px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}
.tab666 .van-tabs__wrap {
    height: 4.75rem;
}
.tab666 .van-tab__text--ellipsis {
  font-size: 34px;
  font-family: PingFang SC;
font-weight: 600;
color: #000000;
line-height: 2rem;
}
.tab666 .van-tabs__line {
  background-color: #FBC805;
  width: 8.8rem;
  height: .5rem;
  opacity: .8;
}
</style>
